import { useEffect, useState } from 'react';
import http from '../../api/index'
import { useParams } from 'react-router-dom'
import img from '../doctor_xq/img/1.png'
import img1 from '../doctor_xq/img/2.png'
import img2 from '../doctor_xq/img/3.png'
import img3 from '../doctor_xq/img/4.png'
import style from './index.module.css'
import Nabar from '../../conpoment/Nabar';
import { ResultPage, Card, Button } from 'antd-mobile'
function Index() {
  const { id } = useParams()
  const [list, setlist] = useState<any>([])
  const [jinq, setjinq] = useState<any>([])
  const [bq, setbq] = useState<any>([])
  console.log(id);
  const getData = async () => {
    try {
      const res = await http.get('/api/doctor/detail', { params: { id: id } })
      const raw = res.data?.data
      const arr = Array.isArray(raw) ? raw : (raw ? [raw] : [])
      // 过滤无效数据
      const filtered = arr.filter((d: any) => d && d.doctorname && d.doctorimage)
      // 去重（优先使用 doctorid / id）
      const uniq = new Map()
      filtered.forEach((d: any) => {
        const key = d.doctorid ?? d.id ?? `${d.doctorname}-${d.doctorcity || ''}`
        if (!uniq.has(key)) uniq.set(key, d)
      })
      const normalized = Array.from(uniq.values())
      setlist(normalized)
      console.log('normalized doctor detail:', normalized)

    } catch (err) {
      console.error(err)
    }
  }
  const getjinq = async () => {
    const res = await http.get('/api/review/banner')
    setjinq(res.data.data)
  }
  const getbq = async () => {
    const res = await http.get('/api/review/classify',) 
    console.log(res.data.data);
    setbq(res.data.data)
  }
  useEffect(() => {
    getData()
    getjinq()
    getbq()
  }, [])
  return (
    <div className={style.page}>
      <Nabar title='妙手医生网络诊室' sticky={false} />
      <div>
      <ResultPage
        status=''
        title=''
        description=''
      >
        <ResultPage.Card style={{ padding: 8 }}>
          {
            list.map((item: any, index: number) => {
              return <div key={item?.doctorid ?? index} className={style.headerCard}>
                <div className={style.headerTop}>
                  <img className={style.avatar} src={item.doctorimage} alt={item.doctorname} />
                  <div className={style.baseInfo}>
                    <div className={style.nameRow}>
                      <span className={style.name}>{item?.doctorname || '医生姓名'}</span>
                      <span className={style.tag}>已认证</span>
                    </div>
                    <div className={style.titleRow}>{item?.doctoradministre || '副主任医师'} · {item?.department || '产科'}</div>
                    <div className={style.hospitalRow}>{item?.doctorcity || '辽宁省妇幼保健院'}</div>
                  </div>
                </div>
                <div className={style.statsRow}>
                  <div className={style.statItem}>
                    <div className={style.statNum}>{item?.textcount ?? 0}</div>
                    <div className={style.statLabel}>浏览人次</div>
                  </div>
                  <div className={style.statItem}>
                    <div className={style.statNum}>{item?.textdoctor ?? '100%'}</div>
                    <div className={style.statLabel}>好评率</div>
                  </div>
                  <div className={style.statItem}>
                    <div className={style.statNum}>{item?.doctoradmin ?? '22分钟'}</div>
                    <div className={style.statLabel}>平均响应</div>
                  </div>
                  <div className={style.statItem}>
                    <div className={style.statNum}>{item?.doctorbrowse ?? 0}</div>
                    <div className={style.statLabel}>粉丝数</div>
                  </div>
                </div>
                <div className={style.desc}>擅长：{item.textdise || '常规产检、孕前诊断与筛查，各种妇科疾病的诊疗，计划生育手术。'}</div>
              </div>
            })
          }

        </ResultPage.Card>
        <Card style={{ marginTop: 12 }}>
          <div className={style.section}>
            <div className={style.sectionTitle}>医生服务</div>
            <div className={style.serviceGrid}>
              <div className={style.serviceItem}>
                <div className={style.serviceIcon}><img src={img} className={style.serviceIcon} alt="" /></div>
                <div className={style.serviceName}>在线咨询</div>
                <div className={style.serviceSub}>1对1问医生</div>
              </div>
              <div className={style.serviceItem}>
                <div className={style.serviceIcon}><img src={img1} className={style.serviceIcon} alt="" /></div>
                <div className={style.serviceName}>复诊开方</div>
                <div className={style.serviceSub}>未开通</div>
              </div>
              <div className={style.serviceItem}>
                <div className={style.serviceIcon}><img src={img2} className={style.serviceIcon} alt="" /></div>
                <div className={style.serviceName}>优选药房</div>
                <div className={style.serviceSub}>未开通</div>
              </div>
              <div className={style.serviceItem}>
                <div className={style.serviceIcon}><img src={img3} className={style.serviceIcon} alt="" /></div>
                <div className={style.serviceName}>门诊预约</div>
                <div className={style.serviceSub}>预约线下就诊</div>
              </div>
            </div>
          </div>
        </Card>
        <div className={style.section}>
          <div className={style.sectionTitle}>评价</div>
          <div className={style.commentList}>
            {((list && list[0]?.comments) || [
              { id: 1, text: '医生非常的耐心！服务态度很好', time: '2024/07/02 16:56:21' },
              { id: 2, text: '谢谢医生，麻烦您啦！', time: '2024/06/17 21:44:16' },
              { id: 3, text: '感谢医生', time: '2024/04/20 23:01:35' },
            ]).map((c: any) => {
              return (
                <div key={c.id} className={style.commentItem}>
                  <div className={style.commentBadges}>
                    {
                      bq.map((item:any, index:number) =>{
                        return <div key={index}>
                           <span className={style.badge}>{item.classifytitle}</span>
                        </div>
                      })
                    }
                  </div>
                  <div className={style.commentText}>{c.text}</div>
                  <div className={style.commentTime}>{c.time}</div>
                </div>
              )
            })} 
          </div>
        </div>
        <div style={{ background: '#fff', marginTop: '10px', padding: '10px' }}>
          <p style={{ background: '#fff' }}>锦旗</p>
          {
            jinq.map((item: any, index: number) => {
              return <div key={index} >
                <div style={{ background: '#fff' }}>
                  <p>{item.bannerstate}</p>
                  <div style={{ textAlign: 'center' }}>
                    <img src={item.bannerimage} alt="" style={{ width: '200px', height: '250px', objectFit: 'contain' }} />
                  </div>
                </div>
              </div>
            })
          }
          <div style={{ textAlign: 'center', marginTop: '10px' }}>
            <a>我要送锦旗＞</a>
          </div>
        </div>
        <div style={{ position: 'fixed', background: '#fff', bottom: '0', left: '0', right: '0', padding: '10px' }} >
          <Button block color='primary'
            style={{ padding: '10px' }}
          >发消息</Button>
        </div>

      </ResultPage>
      </div>
    </div>
  )
}
export default Index
